<template>
    <div class="search_container">
        <HeaderTop :goBack="true" :headTitle="'搜索'"></HeaderTop>
        <form class="search_form">
            <input type="search" name="search" placeholder="请输入小区/写字楼/学校等" v-model="searchValue">
            <button @click.prevent="searchPlace()">搜索</button>
        </form>
        <div v-if="searchData" class="scroll_div">
            <Scroll>
                <ul class="address_list">
                    <li v-for="(item, index) in searchData" :key="index" @click="choooedAddress(item)">
                        <h4>{{item.name}}</h4>
                        <p>{{item.address}}</p>
                    </li>
                </ul>
            </Scroll>
        </div>
        <div v-else class="empty_tips">
            <p>找不到地址？</p>
            <p>尝试输入小区、写字楼或学校名</p>
            <p>详细地址（如门牌号等）可稍后输入哦</p>
        </div>
        
    </div>
</template>

<script>
import {searchNearby} from '@api/getData';
import Scroll from '@components/common/Scroll';
import {mapActions} from 'vuex';

export default {
    components:{
        Scroll
    },
    data(){
        return {
            searchData:null,
            searchValue:'中心',
        }
    },
    methods:{
        ...mapActions(['chooseSearchAddress']),
        async searchPlace(){
            let kw = this.searchValue;
            let res = await searchNearby(kw);
            this.searchData=[...res,...res];
        },
        choooedAddress(item){
            this.chooseSearchAddress(item);
            this.$router.go(-1);
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.search_container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding-top: 1.95rem;
    z-index: 230;
    display: flex;
    flex-direction: column;
    .scroll_div{
        flex: 1;
        overflow-y: auto;
        .address_list{
            padding: 0.1rem 0.5rem;
            li{
                padding: 0.4rem 0;
                border-bottom: 0.012rem solid #f2f2f2;
                h4{
                    @include sc(0.7rem,#333);
                }
                p{
                    @include sc(0.6rem,#666);
                }
            }
        }
    }
    .search_form{
        margin-top: 0.5rem;
        padding: 0 0.5rem;
        display: flex;
        input{
            background: #f2f2f2;
            height: 1.5rem;
            flex: 4;
            margin-right: 0.5rem;
            border-radius: 0.2rem;
            padding-left: 0.2rem;
            font-size: 0.65rem;
        }
        button{
            flex: 1;
            @include sc(0.66rem,#fff);
            background: $blue;
            border-radius: 0.2rem;
        }
    }
    .empty_tips{
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        p{
            width: 100%;
            @include sc(0.5rem,#aaa);
        }
    }
    
    
}
</style>